<template>
  <div class="flex-main">
    <div class="flex-body">
      <ul class="m-editul">
        <li>
          <span>联系人</span>
          <input type="text" name v-model="addrParam.Name" id placeholder="联系人">
        </li>
        <li>
          <span>手机号码</span>
          <input type="text" name v-model="addrParam.Phone" id placeholder="手机号码">
        </li>
        <li @click="choosePCA">
          <span>所在地区</span>
          {{addrParam.Province || '省'}} {{addrParam.City || '市'}} {{addrParam.Area || '区'}}
        </li>
        <li>
          <span>详情地址</span>
          <input type="text" name v-model="addrParam.Address" id placeholder="街道、楼牌号等">
        </li>
        <li class="justify">
          <span>设置为默认地址</span>
          <mt-switch v-model="isDefault" @change="switchDef"></mt-switch>
        </li>
      </ul>
    </div>
    <div class="flex-bottom">
      <div class="m-bottom-btn">
        <button @click="postAddress">保存</button>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom" class="pickerWidth">
      <picker-province-city-area @pickerChange="pickerChange"></picker-province-city-area>
    </mt-popup>
  </div>
</template>
<script>
import { provinceList } from "@/utils/area.js";
import {addAddress} from '@/api/mine';
import { checkMobile } from "@/utils/utils";
import {mapState,mapMutations,mapActions} from 'vuex';
export default {
  name: "",
  data() {
    return {
      isDefault: true,
      popupVisible:false,
      addrParam : {
        Name:'',
        Phone:'',
        CustomerId:'0091001709',
        Address:'',
        State:0,
        Id:'',
        Province:'',
        City:'',
        Area:'',
      }
    };
  },
  computed:{
    ...mapState({
      addrCon:state=>state.mine.addrCon,
    })
  },
  components:{
      pickerProvinceCityArea:()=>import('@/components/pickerProvinceCityArea'),
  },
  methods: {
    // 添加地址
    postAddress() {
      let that = this;
      let addrParam = that.addrParam;
      for (const key in addrParam) {
        if (addrParam.hasOwnProperty(key)) {
          const element = addrParam[key];
          if(key=='Name' && element==''){
            that.$toast('请输入联系人');
            return;
          }
          if(key=='Phone' && (element=='' || !checkMobile(element))){
            that.$toast('请输入正确的手机号码');
            return;
          }
          if((key=='Province' || key=='City' || key=='Area') && element==''){
            that.$toast('请选择省市区');
            return;
          }
          if(key=='Address' && element==''){
            that.$toast('请填写详情地址');
            return;
          }
        }
      }
      addAddress(addrParam).then((result) => {
        that.$toast('地址添加成功');
        that.$router.go(-1);
      }).catch((err) => {
        
      });
    },
    // 是否默认
    switchDef(checked) {
      this.addrParam.State = checked ? 1 : 0;   //0是默认, 1是非默认
    },
    // 显示省市区
    choosePCA(){
        this.popupVisible = true;
        if(this.province==''){
            this.addrParam.Province = provinceList[0].name;
            this.addrParam.City = provinceList[0].cityList[0].name;
            this.addrParam.Area = provinceList[0].cityList[0].areaList[0];
        }
    },
    // 选择省市区
    pickerChange(data) {
        console.log(this.popupVisible);
        if(this.popupVisible){
            this.addrParam.Province = data[0].name;
            this.addrParam.City = data[1].name;
            this.addrParam.Area = data[2];
        }
        
    }
  },
  mounted() {
    this.addrParam = this.addrCon;
    if(this.addrCon.State==0){
      this.isDefault = true;
    }else{
      this.isDefault = false;
    }
  }
};
</script>
<style lang="less" scoped src="@/less/mine/address.less"></style>
